
<template>
	<div>
		<div style="display: none">
			<ParamDefine :params="{}" ref="left"></ParamDefine>
		</div>

		<a-row class="mb-2">
			<a-col span="20"> </a-col>
			<a-col span="2">
				<a-button type="primary" @click="addCondition">新增</a-button>
			</a-col>
			<a-col span="2">
				<a-button @click="removeCondition">删除</a-button>
			</a-col>
		</a-row>
		<a-row>
			<a-col span="24">
				<Table
					stripe
					border
					:height="props.height"
					highlight-row
					@on-current-change="currentChange"
					@on-cell-click="cellClick"
					:columns="conditionColumns"
					:data="props.conditionData"
				>
					<template #logicalOperator="{ row }">
						<el-select
							v-model="row.logicalOperator"
							:on-change="valueChange(row, 'logicalOperator')"
							clearable
							filterable
						>
							<el-option
								v-for="item in logicalOperatorList"
								:label="item.name"
								:value="item.code"
								:key="item.code"
							></el-option>
						</el-select>
					</template>

					<template #leftBracket="{ row }">
						<el-select v-model="row.leftBracket" :on-change="valueChange(row, 'leftBracket')" clearable filterable>
							<el-option v-for="item in bracketList" :label="item.name" :value="item.code" :key="item.code"></el-option>
						</el-select>
					</template>

					<template #fieldCode="{ row }">
						<el-select v-model="row.fieldCode" :on-change="valueChange(row, 'fieldCode')" clearable filterable>
							<el-option
								v-for="item in props.tableFieldList"
								:label="item.columnName || item.fieldName"
								:value="item.columnName || item.fieldName"
								:key="item.columnName || item.fieldName"
							></el-option>
						</el-select>
					</template>

					<template #relationalOperator="{ row }">
						<el-select
							v-model="row.relationalOperator"
							:on-change="valueChange(row, 'relationalOperator')"
							clearable
							filterable
						>
							<el-option
								v-for="item in relationalOperatorList"
								:label="item.name"
								:value="item.code"
								:key="item.code"
							></el-option>
						</el-select>
					</template>

					<template #rightValue="{ row }">
						<TreeSelect
							v-if="!row.rightValueConstantFlag"
							v-model="row.rightValue"
							:on-change="valueChange(row, 'rightValue')"
							:data="treeValueList"
							v-width="90"
						/>

						<Input
							v-if="row.rightValueConstantFlag"
							@on-change="valueChange(row, 'rightValue')"
							style="width: 90px"
							v-model="row.rightValue"
							placeholder="请输入值"
						/>

						&nbsp;
						<Checkbox
							v-model="row.rightValueConstantFlag"
							@on-change="valueChange(row, 'rightValueConstantFlag')"
							label=""
							>常量</Checkbox
						>
						<!-- <el-select v-model="row.value" :on-change="valueChange(row, 'value')" clearable filterable>
                                <el-option v-for="item in props.value" :label="item.name" :value="item.code"
                                    :key="item.code"></el-option>
                            </el-select> -->
					</template>

					<template #rightBracket="{ row }">
						<el-select v-model="row.rightBracket" :on-change="valueChange(row, 'rightBracket')" clearable filterable>
							<el-option v-for="item in bracketList" :label="item.name" :value="item.code" :key="item.code"></el-option>
						</el-select>
					</template>
				</Table>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw, inject, getCurrentInstance } from 'vue'
import { Message, Radio, Row, Switch } from 'view-ui-plus'
import { nanoid } from 'nanoid'
import processVersionContentApi from '@/api/process/processVersionContentApi'
import ParamDefine from '@/views/restapi/ParamDefine.vue'

const props = defineProps(['tableFieldList', 'values', 'conditionData', 'height'])
const left = ref()
const logicalOperatorList = ref([
	{
		name: 'and',
		code: 'and'
	},
	{
		name: 'or',
		code: 'or'
	}
])

watch(
	() => props.values,
	(newValue, oldValue) => {
		transferTreePrev()
	}
)

const transferTreePrev = () => {
	const cb = left.value.repairJson(props.values)
	transferTree(cb.params)
	treeValueList.value = cb.params
}
onMounted(() => {
	transferTreePrev()
})
const transferTree = (list) => {
	for (let i = 0; i < list.length; i++) {
		const data = list[i]
		data.title = data.fieldName
		data.expand = false
		data.value = data.jsonPath
		data.selected = false
		data.checked = false

		if (data.children) {
			transferTree(data.children)
		}
	}
}

const treeValueList = ref([])

const relationalOperatorList = ref([
	{
		name: '=',
		code: 'eq'
	},
	{
		name: '!=',
		code: 'notEq'
	},
	{
		name: 'in',
		code: 'in'
	},
	{
		name: 'not in',
		code: 'notIn'
	},
	{
		name: 'IS NOT NULL',
		code: 'IsNotNull'
	},
	{
		name: 'IS NULL',
		code: 'IsNull'
	},

	{
		name: 'IS EMPTY',
		code: 'IsEmpty'
	},
	{
		name: 'IS NOT EMPTY',
		code: 'IsNotEmpty'
	},
	{
		name: 'likeLeft',
		code: 'likeLeft'
	},
	{
		name: 'likeRight',
		code: 'likeRight'
	}
])
const bracketList = ref([
	{
		name: '(',
		code: 'left'
	},
	{
		name: ')',
		code: 'right'
	}
])

const conditionColumns = ref([
	{
		title: '逻辑运算符',
		key: 'logicalOperator',
		width: 150,
		slot: 'logicalOperator'
		// slot: 'fieldCode',
		// tree: true
	},
	{
		title: '左括号',
		key: 'leftBracket',
		width: 100,
		slot: 'leftBracket'
		// slot: 'fieldCode',
		// tree: true
	},
	{
		title: '字段',
		key: 'fieldCode',
		width: 200,
		slot: 'fieldCode'
	},
	{
		title: '关系运算符',
		key: 'relationalOperator',
		slot: 'relationalOperator',
		width: 150
	},
	{
		title: '值',
		key: 'rightValue',
		slot: 'rightValue',
		width: 200
	},
	{
		title: '右括号',
		key: 'rightBracket',
		slot: 'rightBracket'
		// slot: 'fieldCode',
		// tree: true
	}
])
const getFieldName = (row) => {
	if (!row.logicalOperator) {
		return
	}
	let result = ''
	for (const fieldType of logicalOperatorList.value) {
		if (fieldType.code == row.logicalOperator) {
			result = fieldType.name
		}
	}
	return result
}

// const conditionData = ref([]);

const valueChange = (row, key) => {
	console.log(row, key)
	for (const c of props.conditionData) {
		if (c.id == row.id) {
			c[key] = row[key]
		}
	}
}

const addCondition = () => {
	const id = nanoid(5)
	props.conditionData.push({
		id: id,
		logicalOperator: null,
		leftBracket: null,
		fieldCode: null,
		rightValueConstantFlag: false,
		relationalOperator: null,
		rightValue: null,
		rightBracket: null
	})
}

const cellClick = (row, column, data, event) => {
	//这里需要
	row[column.key + 'EditorFlag'] = true
}

const removeCondition = () => {
	if (!currentRow.value) {
		return
	}
	var i = 0
	for (const c of props.conditionData) {
		if (c.id == currentRow.value.id) {
			props.conditionData.splice(i, 1)
		}
		i++
	}
}

const currentRow = ref()
const currentChange = (cr, oldCurrentRow) => {
	currentRow.value = cr
}
</script>


<style scoped></style>
